import 'package:flutter/material.dart';
import 'package:flutter_eve_plugin/components/health/text_ex.dart';
import 'package:flutter_eve_plugin/components/ye_xiu/rank/rank_user_icon.dart';
import 'package:flutter_eve_plugin/constants/font_family.dart';
import 'package:flutter_eve_plugin/model/ye_xiu/rank/rank_info.dart';
import 'package:flutter_eve_plugin/utils/color_common.dart';
import 'package:flutter_eve_plugin/utils/image_util.dart';
import 'package:flutter_eve_plugin/utils/screen_util.dart';

class RankHeaderWidget extends StatelessWidget {
  final List<RankUser> rankUserList;

  const RankHeaderWidget({
    Key key,
    this.rankUserList,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        width: setRatio(321),
        height: setRatio(253),
        color: Colors.transparent,
        child: Padding(
          padding: EdgeInsets.only(top: setRatio(20)),
          child: Stack(
            overflow: Overflow.visible,
            children: <Widget>[
              Center(
                child: Image.asset(
                  imageUtilYeXiu('rank/icon_rank_list_header@3x'),
                  width: setRatio(321),
                  height: setRatio(253),
                ),
              ),
              Positioned(
                top: setRatio(16),
                left: setRatio(119),
                child: buildFirst(),
              ),
              Positioned(
                left: setRatio(10),
                top: setRatio(52),
                child: buildSecond(),
              ),
              Positioned(
                right: setRatio(12),
                top: setRatio(64),
                child: buildThird(),
              )
            ],
          ),
        ),
      ),
    );

//    return Container(
//      color: Colors.transparent,
//      child: Padding(
//        padding: EdgeInsets.only(left: setRatio(27), top: setRatio(20)),
//        child: Stack(
//          overflow: Overflow.visible,
//          children: <Widget>[
//            Center(
//              child: Image.asset(
//                imageUtilYeXiu('rank/icon_rank_list_header@3x'),
//                width: setRatio(321),
//                height: setRatio(253),
//              ),
//            ),
//            Positioned(
//              top: setRatio(19),
//              left: setRatio(132),
//              child: buildFirst(),
//            ),
//            Positioned(
//              left: setRatio(15),
//              top: setRatio(57),
//              child: buildSecond(),
//            ),
//            Positioned(
//              right: setRatio(17),
//              top: setRatio(71),
//              child: buildThird(),
//            )
//          ],
//        ),
//      ),
//    );
  }

  Widget buildFirst() {
    if (rankUserList.length > 0) {
      var rankUser = rankUserList[0];
      return RankUserItem(
        rankUser: rankUser,
        iconHeight: 65,
        iconWidth: 65,
      );
    } else {
      return Container();
    }
  }

  Widget buildSecond() {
    if (rankUserList.length > 1) {
      var rankUser = rankUserList[1];
      return RankUserItem(
        rankUser: rankUser,
        iconHeight: 54,
        iconWidth: 54,
      );
    } else {
      return Container();
    }
  }

  Widget buildThird() {
    if (rankUserList.length > 2) {
      var rankUser = rankUserList[2];
      return RankUserItem(
        rankUser: rankUser,
        iconHeight: 55,
        iconWidth: 55,
      );
    } else {
      return Container();
    }
  }
}

class RankUserItem extends StatelessWidget {
  final RankUser rankUser;
  final double iconWidth;
  final double iconHeight;

  const RankUserItem(
      {Key key, this.rankUser, this.iconWidth = 50, this.iconHeight = 50})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
        width: setRatio(90),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            RankUserIcon(
              iconUrl: rankUser.avatarUrl,
              level: rankUser.level,
              height: setRatio(iconHeight),
              width: setRatio(iconWidth),
            ),
            SizedBox(
              height: setRatio(20),
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Expanded(
                  child: Text(
                    rankUser.nickname,
                    overflow: TextOverflow.ellipsis,
                    textAlign: TextAlign.center,
                    maxLines: 1,
                    style: TextStyle(
                      color: Color(ColorRes.colorWhite),
                      fontSize: 14,
                    ),
                  ),
                ),
                Offstage(
                  offstage: !rankUser.isVip,
                  child: Image.asset(
                    imageUtilYeXiu('checkpoint/icon_checkpoint_vip@3x'),
                    width: setRatio(30),
                    height: setRatio(20),
                  ),
                )
              ],
            ),
            SizedBox(
              height: setRatio(6),
            ),
            TextEx(
              rankUser.pValue.toString(),
//              shadow: Color(0xFFFDFBAA),
              style: TextStyle(
                  shadows: [
                    BoxShadow(
                        color: Color(0xFFFDFBAA),
                        offset: Offset(0, setRatio(0.2)),
                        blurRadius: setRatio(0.1))
                  ],
                  fontFamily: FontFamily.PINGFANG,
                  fontSize: setTextSp(14),
                  color: Color(0xFFFDFBAA)),
            ),
          ],
        ));
  }
}
